<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title><g:layoutTitle default="Grails"/></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
		<link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
		<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'style-element.css')}" type="text/css">
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'themes.css')}" type="text/css">
		<r:require modules="jquery, Bootstrap, jQueryui, Kanban, PlUpload, MyAgileUI"/>
		<r:layoutResources />		
		<g:layoutHead/>
	</head>
	<body>
	<div id="wrapper">
	<div id="navigation">
		<div class="container-fluid">
			<a href="${createLink(uri: '/')}" id="brand">MYAGILE</a>			
			<ul class='main-nav'>
				<li><a href="${createLink(controller:'Team')}"><span>My teams</span></a></li>
				<li><a href="${createLink(controller:'Project',action:'index')}"><span>My projects</span></a></li>
				<li><a href="#"><span>Blacklogs</span></a></li>
				<li><a href="${createLink(controller:'Sprint',action:'index')}"><span>Sprint</span></a></li>
				<li><a href="${createLink(controller:'Issue',action:'index')}"><span>Issue</span></a></li>
				<li><a href="${createLink(controller:'RetrospectiveResult',action:'index')}"><span>Meeting</span></a></li>
				<li><a href="${createLink(controller:'Dashboard',action:'index')}"><span>Dashboard</span></a></li>								
			</ul>
			<div class="user">
			<sec:ifLoggedIn>				
				<div class="dropdown">
					<a id="info" href="#" class="dropdown-toggle" data-toggle="dropdown"><sec:username /><img height="27" width="27" src="../avatarImages/user.png" alt=""></a>
					
					<ul class="dropdown-menu pull-right">
						<li>
							<a href="${createLink(controller:'member',action:'update')}">Edit profile</a>
						</li>
						<li>
							<a href="#">Account settings</a>
						</li>
						<li>
							<a href="${createLink(controller: 'logout')}">Sign out</a>
						</li>
					</ul>
				</div>
			</sec:ifLoggedIn>
			</div>						
		</div>
	</div>
	<div id="content" align="center">
		<g:layoutBody/>
		</div>
		<g:javascript library="application"/>
		<r:layoutResources />
	</div>
	<script type="text/javascript">
		$(document).ready(function(){
			$.ajax({
				url: '${createLink(controller: 'login', action: 'findMemberByUserName')}',
				dataType: 'json',
				success: function(data){
					if(data.avatar.avatar == null){
						var pathImg = '<sec:username /><img style= "width: 27px; height: 27px;" src="${resource(dir : 'avatarImages/',file: 'user.png', absolute : true)}"/>'
						$('#info').html(pathImg);
					}
					else {
					var pathImg = '<sec:username /><img style= "width: 27px; height: 27px;" src="${resource(dir : 'avatarImages/', absolute : true)}'+data.avatar.avatar+'"/>'
					$('#info').html(pathImg);
					}	
				}
			});

			var pathname = window.location.pathname;
			var s = pathname.slice(0, pathname.lastIndexOf("/"));
			$('li').removeClass('active');
			var li = $('a[href="'+s+'/index"]').parent();
			if(li.parent().parent().is('li'))
				li.parent().parent().addClass('active');
			else
				li.addClass('active');
		});
	</script>
	</body>
</html>
